从零开始实现网易云音乐播放器(3)

H5增加了很多的标签，面试的时候，如果面试官问你H5都有哪些新标签，你回答header、footer、nav。

这么回答几乎是无效的，因为这些标签在H5里面的角色，相当于鸡骨头、鱼刺、蘑菇腿——全是鸡肋，至少你得答出来audio、video、canvas，这些才是H5的核心功能，本文我们就重点说一下audio。

audio广泛的应用于各种项目中，游戏背景、各种播放器，可以说有声音的地方就有audio，当然因为各种限制和坑，很容易让前端人员陷入尴尬，比如在iphone下audio 是不允许autoplay的，如果前端人员不知道这个坑，产品经理又拿微信做对比，那这个锅前端就背定了。

所以本文通过对audio的核心知识的讲解，让用户一来不背锅，二来不加班。

第一步非常简单你就把audio当成图片使用，搞出个src,剩下ul是歌曲列表，然后是一堆功能按钮，不再赘述。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <title>网易云音乐</title>
</head>
<body>
    <audio src="mp3/千千阙歌.mp3" id="audio" controls></audio>
    <h3>点击开始播放</h3>
    <ul>
        <li>
            <a href="javascript:;">千千阙歌</a>
        </li>
        <li>
            <a href="javascript:;">时间都去哪儿了</a>
        </li>
        <li>
            <a href="javascript:;">小苹果</a>
        </li>
        <li>
            <a href="javascript:;">夜的钢琴曲</a>
        </li>
        <li>
            <a href="javascript:;">雨的印记</a>
        </li>
    </ul>
    <div class="progress-bar">
        <div class="progress"></div>
        <div class="progress-btn"></div>
    </div>
    <div>
        <input type="button" value="上一曲" id="prev">
        <input type="button" value="播放" id="play">
        <input type="button" value="下一曲" id="next">

        <input type="button" value="单曲循环" id="singleLoop">
        <input type="button" value="顺序播放" id="queue">
        <input type="button" value="随机播放" id="randomQueue">
        <input type="button" value="循环播放" id="menuloop">
    </div>
</body>
</html>

这样的播放控制条很丑，产品经理会很不满意，当然了，如果产品经理说真好看，那你就换公司吧，我们需要隐藏控制条，然后自己用各种按钮和标签模拟一个。

第一个功能，播放暂停，

        //播放
        oPlay.onclick = function () {
            if (oA.paused) {
                this.value = '暂停'
                oA.play();
            } else {
                this.value = '播放'
                oA.pause();
            }
        };

然后整下一曲，

            var arrSong = [
                '千千阙歌',
                '时间都去哪儿了',
                '小苹果',
                '夜的钢琴曲',
                '雨的印记'
            ];

           //下一曲
            function play() {
                for (var i = 0; i < aA.length; i++) {
                    aA[i].className = '';
                }
                aA[iNow].className = 'on';
                oA.src = 'mp3/' + arrSong[iNow] + '.mp3';
                oA.play();
            }
            //下一曲
            oNext.onclick = function () {
                iNow++;
                if (iNow >= arrSong.length) {
                    iNow = 0;

                }
                oPlay.value = '暂停';
                play();
            };

这里大家要注意，我使用的是数组的形式，因为数组要比单独处理某一个音乐更方便。下面是单曲循环

            //单曲循环
            oSingleLoop.onclick = function () {
                oA.loop = !oA.loop;
            };

这里涉及到一个坑，很多人会觉得我直接在mp3播放onend事件里面在播放一次原来的音乐不就可以了吗？

确实可以问题是麻烦，因为自身就有了loop属性，但是随机播放或者整个列表重复就没有属性了，这里就要使用switch case判断。

            //顺序播放
            oQueue.onclick = function () {
                oA.playState = 2;
            };
            //随机播放
            oRandomQueue.onclick = function () {
                oA.playState = 3;
            };
            //列表循环
            oMenuloop.onclick = function () {
                oA.playState = 4;
            };

            //播放完毕，单曲循环
            oA.onended = function () {
                switch (oA.playState) {
                    case 2:
                        iNow++;
                        if (iNow < arrSong.length) {
                            play();
                        }
                        break;
                    //随机
                    case 3:
                        iNow = rnd(0, arrSong.length);
                        play();
                        break;
                    //列表循环   
                    case 4:
                        iNow++;
                        if (iNow > arrSong.length) iNow = 0;
                        play();
                        break;

                }
            };

这里算是一个功能实现技巧，通过开关，上面说这些都很简单，我们实现一个看起来复杂其实非常简单的的功能，进度条，其实进度就是当前时间/总时间，这里要用一个timeupdate事件，因为播放的过程中时间是不断变化的，

    
            oA.addEventListener('timeupdate', activeProgressBar, false);
            function activeProgressBar() {
                var percentNum = Math.floor((oA.currentTime / oA.duration) * 10000) / 100 + '%';
                progress.style.width = percentNum;
                progressBtn.style.left = percentNum;
            }

这里，给大家顺便留一个作业，如何实现进度条拖拽改变，播放进度呢？提示

var percentNum = (e.targetTouches[0].pageX - progressBar.getBoundingClientRect().left) / progressBar.getBoundingClientRect().width;

最后给大家说两个坑，第一个坑是mp3加载，建议使用preloadjs 而不是preload属性，

第二给大家一个事件，

audio.addEventListener('loadedmetadata', function() {
    console.log("Playing " + audio.src + ", for: " + audio.duration + "seconds.");
    audio.play(); 
});

这个事件用在页面加载完，但是mp3如果没有加载到位会出现获取音乐时长NaN问题，用这个就OK了。

最后给大家留一个作业，

实现https://music.163.com/#/my/m/...、下一曲、单曲、列表循环、顺序播放，以及播放进度控制CD封面旋转功能。

从零开始实现网易云音乐播放器(3)

彬哥头发多

引用和评论

vue3公司自用项目实战入门（vue3+router4+antdv+pinia实现）

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

一个简易的DIY场景H5框架

使用 URLSearchParams 轻松操作 URL

svg之viewBox